// 简单的配置化弹窗
<template>
  <div class="x-dialog">
    <el-dialog
      :visible.sync="_dialogVisible"
      v-bind="$attrs"
      v-on="$listeners"
      :title="mtitle"
    >
      <!-- 提供一个插槽 -->
      <slot></slot>
      <span slot="footer" v-if="defaultFooter">
        <el-button @click="_dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="$emit('dialogFixHandle')"
          >确 定</el-button
        >
      </span>
      <span slot="footer" v-else>
        <el-button type="primary" @click="_dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "XDialog",
  props: {
    defaultFooter: {
      type: Boolean,
      default: () => true,
    },
    dialogVisible: {
      type: Boolean,
      default: () => false,
    },
    mtitle: {
      type: String || Number,
      default: () => "",
    },
  },
  computed: {
    _dialogVisible: {
      get() {
        return this.dialogVisible;
      },
      set(newVal) {
        this.$emit("update:dialogVisible", newVal);
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>
